<!-- 音乐详情页面 -->
<template>
	<div class="music-list">
		<div class="back">
			<i class="icon-back" @click="back"></i>
		</div>
		<h1 class="title" v-html="title"></h1>
		<div class="bg-image" ref="bgImage" :style="bgStyle">
			<div class="play-wrapper">
				<div ref="playBtn" v-show="songs.length>0" class="play" @click="random">
					<i class="icon-play"></i>
					<span class="text">随机播放全部</span>
				</div>
			</div>
			<div class="filter" ref="filter"></div>
		</div>
		<div class="bg-layer" ref="layer"></div>
		<scroll :data="songs" @scroll="scroll" :listen-scroll="listenScroll" :probe-type="probeType" class="list" ref="list">
			<div class="song-list-wrapper">
				<song-list :songs="songs" :rank="rank" @select="selectItem"></song-list>
			</div>
			<div v-show="!songs.length" class="loading-container">
				<loading></loading>
			</div>
		</scroll>
	</div>
</template>

<script type="text/ecmascript-6">
import Scroll from "base/scroll/scroll";
import Loading from "base/loading/loading";
import SongList from "base/song-list/song-list";
import { prefixStyle } from "common/js/dom";
import { playlistMixin } from "common/js/mixin";
import { mapActions, mapMutations } from "vuex";
import { getMusic } from "api/recommend";
import { ERR_OK } from "api/config";

const RESERVED_HEIGHT = 40;
const transform = prefixStyle("transform");
const backdrop = prefixStyle("backdrop-filter");

export default {
    // 组件中插入外部属性  组件中的属性会覆盖mixin中的属性
    mixins: [playlistMixin],
    props: {
        bgImage: {
            type: String,
            default: ""
        },
        songs: {
            type: Array,
            default: []
        },
        title: {
            type: String,
            default: ""
        },
        rank: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            scrollY: 0
        };
    },
    computed: {
        bgStyle() {
            return `background-image:url(${this.bgImage})`;
        }
    },
    created() {
        this.probeType = 3;
        this.listenScroll = true;
    },
    mounted() {
        this.imageHeight = this.$refs.bgImage.clientHeight;
        this.minTransalteY = -this.imageHeight + RESERVED_HEIGHT;
        this.$refs.list.$el.style.top = `${this.imageHeight}px`;
    },
    methods: {
        ...mapMutations({
            setVkey: "SET_VKEY"
		}),
		// mixins
        handlePlaylist(playlist) {
            const bottom = playlist.length > 0 ? "60px" : "";
            this.$refs.list.$el.style.bottom = bottom;
            this.$refs.list.refresh(); // 重新计算scroll 重新刷新
        },
        scroll(pos) {
            this.scrollY = pos.y;
        },
        back() {
            // 返回上一个页面
            this.$router.back();
        },
        selectItem(item, index) {
            console.log(item.mid);
            // 获取vkey
            getMusic(item.mid).then(res => {
                if (res.code == ERR_OK) {
                    var getVkey = res.data.items[0].vkey;
                    var url = `http://dl.stream.qqmusic.qq.com/C400${
                        item.mid
                    }.m4a?vkey=${getVkey}&guid=6217354311&uin=0&fromtag=38`;
                    this.setVkey(url);
                }
            });
            // 修改actions
            this.selectPlay({
                list: this.songs,
                index
            });
        },
        random() {
            this.randomPlay({
                list: this.songs
            });
        },
        ...mapActions(["selectPlay", "randomPlay"])
    },
    watch: {
        scrollY(newVal) {
            let translateY = Math.max(this.minTransalteY, newVal);
            let scale = 1;
            let zIndex = 0;
            let blur = 0;
            const percent = Math.abs(newVal / this.imageHeight);
            if (newVal > 0) {
                scale = 1 + percent;
                zIndex = 10;
            } else {
                blur = Math.min(20, percent * 20);
            }
            this.$refs.layer.style[
                transform
            ] = `translate3d(0,${translateY}px,0)`;
            this.$refs.filter.style[backdrop] = `blur(${blur}px)`;
            if (newVal < this.minTransalteY) {
                zIndex = 10;
                this.$refs.bgImage.style.paddingTop = 0;
                this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`;
                this.$refs.playBtn.style.display = "none";
            } else {
                this.$refs.bgImage.style.paddingTop = "70%";
                this.$refs.bgImage.style.height = 0;
                this.$refs.playBtn.style.display = "";
            }
            this.$refs.bgImage.style[transform] = `scale(${scale})`;
            this.$refs.bgImage.style.zIndex = zIndex;
        }
    },
    components: {
        Scroll,
        Loading,
        SongList
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable'
@import '~common/stylus/mixin'
.music-list
	position fixed
	z-index 100
	top 0
	left 0
	bottom 0
	right 0
	background $color-background
	.back
		position absolute
		top 0
		left 6px
		z-index 50
		.icon-back
			display block
			padding 10px
			font-size $font-size-large-x
			color $color-theme
	.title
		position absolute
		top 0
		left 10%
		z-index 40
		width 80%
		no-wrap()
		text-align center
		line-height 40px
		font-size $font-size-large
		color $color-text
	.bg-image
		position relative
		width 100%
		height 0
		padding-top 70%
		transform-origin top
		background-size cover
		.play-wrapper
			position absolute
			bottom 20px
			z-index 50
			width 100%
			.play
				box-sizing border-box
				width 135px
				padding 7px 0
				margin 0 auto
				text-align center
				border 1px solid $color-theme
				color $color-theme
				border-radius 100px
				font-size 0
				.icon-play
					display inline-block
					vertical-align middle
					margin-right 6px
					font-size $font-size-medium-x
				.text
					display inline-block
					vertical-align middle
					font-size $font-size-small
		.filter
			position absolute
			top 0
			left 0
			width 100%
			height 100%
			background rgba(7, 17, 27, 0.4)
	.bg-layer
		position relative
		height 100%
		background $color-background
	.list
		position fixed
		top 0
		bottom 0
		width 100%
		background $color-background
		.song-list-wrapper
			padding 20px 30px
		.loading-container
			position absolute
			width 100%
			top 50%
			transform translateY(-50%)
</style>
